<template>
    <text
        v-if="loseMargin"
        class="dy-iconfont"
        :style="{
            color: color,
            'font-size': size + 'rpx',
            'margin-top': -(size / 4) + 'rpx',
            'margin-bottom': -(size / 4) + 'rpx',
        }"
        :class="[customIcons]"></text>
    <text v-else class="dy-iconfont" :style="{ color: color, 'font-size': size + 'rpx' }" :class="[customIcons]"></text>
</template>
<script>
/**
 * Icons 图标
 * @description 用于展示 icons 图标
 * @tutorial https://ext.dcloud.net.cn/plugin?id=28
 * @property {Number} size 图标大小
 * @property {String} customIcons 图标图案，图标主题颜色相关class <iconsfont customIcons="icon-kefu icon-gray-2" size="52"></iconsfont>
 * @property {String} color 图标颜色
 * @event {Function} click 点击 Icon 触发事件
 */
export default {
    name: "iconsfont",
    props: {
        color: {
            type: String,
            default: "",
        },
        size: {
            type: [Number, String],
            default: 32,
        },
        customIcons: {
            type: String,
            default: "",
        },
        loseMargin: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {}
    },
    mounted() {},
    methods: {
        _onClick() {
            this.$emit("click")
        },
    },
}
</script>

<style lang="scss" scoped>
@import "./style/dy-iconfont.css";
.dy-iconfont {
    display: block;
}
.icon-defalut {
    color: $app-color-text-main;
}
</style>
